<template>
  <div>
    <el-card>
      <el-form ref="searchForm" :rules="rules" :inline="true" :model="formSearch" class="demo-form-inline formHeight">
        <!-- :rules="[ { required: true, message: '请输入关键词'}]" -->
        <el-form-item prop="searchTxt" :label="type==='powerType'?'用电性质':'分类名称'">
          <el-input v-model="formSearch.searchTxt" size="mini" clearable placeholder="请输入关键词" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
          <el-button type="primary" size="mini" @click="handler('add')">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="table_box">
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-for="(item,index) in tableHead"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">

            <template v-if="item.prop==='status_txt'">
              <el-tag :type="scope.row[item.prop]==='正常'?'success':'danger'">{{ scope.row[item.prop] }}</el-tag>
            </template>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-search" circle @click="handler('see',scope.row.id)" />
            <el-button type="primary" icon="el-icon-edit" circle @click="handler('edit',scope.row.id)" />
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteItem(scope.row,scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div> -->
    <div class="page_box">
      <el-pagination
        background
        layout="total ,prev, pager, next"
        :total="pageTotal"
        :page-size="limit"
        @current-change="changePage"
      />
    </div>
    <commonDialog ref="commonDialog" :show-model="showModel" :module-type="moduleType" @fatherClose="closeDialog" @fatherEdit="editTable" @fatherAdd="addTable" />
  </div>
</template>

<script>
import commonMix from '@/mixin/commonMix.js'
export default {
  name: 'siteType',
  mixins: [commonMix],
  data() {
    return {
      type: 'siteType',
      tableData: [],
      multipleSelection: [],
      // 正常1 禁用 0
      tableHead: [
        {
          label: '编号',
          prop: 'id',
          width: 120
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: 200
        },
        {
          label: '分类名称',
          prop: 'cate_name',
          width: 120
        },
        {
          label: '状态',
          prop: 'status_txt',
          width: 120
        }
      ]
    }
  },
  mounted() {

  },
  methods: {

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
.el-row{
  margin-top: 20px;
}
.page_box{
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.table_box{
  padding: 20px;
}
</style>
